<template>
  <div class="dashboard-container">
    <!-- 顶部标题栏（F11全屏140px，非全屏自适应） -->
    <div class="top-header" :style="headerStyle">
      <h1>高平市水环境监控预警与<br />风险防控管理平台</h1>
    </div>

    <!-- 主体内容布局 -->
    <div class="main-content" :style="mainContentStyle">
      <!-- 个人中心和退出登录 -->
      <div class="right-menu d-flex a-center">
        <NavBarWarning></NavBarWarning>
        <el-dropdown  class="avatar-container right-menu-item hover-effect" trigger="hover">
          <div class="avatar-wrapper">
            <img src="../../assets/menu/exit.png" class="user-avatar" />
            <span class="user-nickname"> {{ nickName }} </span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 左侧面板 -->
      <div class="panel-col left">
        <!-- 水环境质量 -->
        <div class="panel water-quality">
          <div class="panel-header">
            <div
              class="panel-title-container"
              @click="navigateToMenu('185001', '2')"
            >
              <h2 class="panel-title">水环境质量</h2>
            </div>
          </div>
          <p class="stats">
            总数 {{ qualityPieTotal }}个，无数据
            {{ qualityPieOfflinesize }}个，超标
            {{ qualityPieisOvesize }}个，优良率 {{ qualityPieexcellent }}%
          </p>
          <div ref="qualityPie" class="chart"></div>
        </div>

        <!-- 手工断面水质分析 -->
        <div class="panel manual-analysis">
          <div class="panel-header">
            <div
              class="panel-title-container"
              @click="navigateToMenu('185001', '1')"
            >
              <h2 class="panel-title">手工断面水质分析</h2>
              <div class="date">2025-10</div>
            </div>
          </div>
          <div class="radio-group">
            <el-radio-group
              v-model="manualSectionType"
              @change="manualTypeChange"
              size="small"
            >
              <el-radio-button label="0">国考</el-radio-button>
              <el-radio-button label="1">省考</el-radio-button>
              <el-radio-button label="2">市考</el-radio-button>
            </el-radio-group>
          </div>
          <!-- 双环形仪表盘 -->
          <div class="gauge-container">
            <!-- 达标率环形组 -->
            <div class="gauge-group cicLeft">
              <div class="gauge-info">
                <div class="gauge-value">{{ isOver ? isOver : 0 }}%</div>
                <div class="gauge-trend">
                  <div>
                    同比
                    <span class="up">▲ {{ tbisOver ? tbisOver : 0 }}%</span>
                  </div>
                  <div>
                    环比
                    <span class="down">▼ {{ hbisOver ? hbisOver : 0 }}%</span>
                  </div>
                </div>
              </div>
              <div class="gauge-label">达标率</div>
            </div>
            <!-- 分割线 -->
            <div class="gauge-divider"></div>
            <!-- 优良率环形组 -->
            <div class="gauge-group cicRight">
              <div class="gauge-info">
                <div class="gauge-value">{{ yl ? yl : 0 }}%</div>
                <div class="gauge-trend">
                  <div>
                    同比 <span class="up">▲ {{ tbyl ? tbyl : 0 }}%</span>
                  </div>
                  <div>
                    环比 <span class="down">▼ {{ hbyl ? hbyl : 0 }}%</span>
                  </div>
                </div>
              </div>
              <div class="gauge-label">优良率</div>
            </div>
          </div>
        </div>

        <!-- 水质变化 -->
        <div class="panel water-change">
          <div class="panel-header">
            <div
              class="panel-title-container"
              @click="navigateToMenu('185001', '1')"
            >
              <h2 class="panel-title">水质变化</h2>
            </div>
          </div>
          <div ref="waterChange" class="chart"></div>
        </div>
      </div>

      <!-- 中间功能模块区域：使用menuList动态渲染 -->
      <div class="center-section">
        <ul class="function-modules">
          <li
            v-for="(module, index) in formattedMenuList"
            :key="module.menuId || index"
            class="module-item"
            @click="menuClickEvent(module)"
          >
            <img
              :src="module.icon"
              :alt="module.menuName"
              class="module-icon"
            />
            <span
              class="module-name"
              v-html="formatMenuName(module.menuName)"
            ></span>
          </li>
        </ul>
      </div>

      <!-- 右侧面板 -->
      <div class="panel-col right">
        <!-- 污染源分析 -->
        <div class="panel pollution-analysis">
          <div class="panel-header">
            <div
              @click="navigateToMenu('185007')"
              class="panel-title-container"
            >
              <h2 class="panel-title">污染源分析</h2>
            </div>
          </div>
          <div class="info-text">
            <div class="info-row">
              <p>污染源企业 32</p>
              <p>污水处理厂 {{ sewagefarmNums }}</p>
              <p>入河排污口 {{ outfallNums }}</p>
            </div>
            <div class="info-row">
              <p>排放量 {{ dischargeNums }}万吨</p>
              <p style="color: #ff4d4f">超标企业 {{ overNums }}个</p>
              <p></p>
            </div>
          </div>
          <div ref="pollutionBar" class="chart"></div>
        </div>

        <!-- 实时监测列表 -->
        <div class="panel monitor-list">
          <div class="panel-header">
            <div
              class="panel-title-container"
              @click="navigateToMenu('185001', '2')"
            >
              <h2 class="panel-title">实时监测列表</h2>
            </div>
          </div>
          <!-- 自定义监测列表结构 -->
          <div class="monitor-list-custom">
            <div
              v-for="item in monitorList"
              :key="item.id"
              class="monitor-item"
              :class="{ exceed: item.isoverstandard === '1' }"
            >
              <div class="item-header">
                <i class="el-icon-water-drop"></i>
                <span class="item-name">{{ item.segmentname }}</span>
                <el-tag :type="getTagType(item.qualitylevelname)" size="mini">
                  {{ item.qualitylevelname }}
                </el-tag>
                <el-tag
                  :type="item.isoverstandard === '1' ? 'danger' : 'success'"
                  size="mini"
                >
                  {{ item.isoverstandard === "1" ? "超标" : "未超标" }}
                </el-tag>
              </div>
              <!-- 超标描述（仅超标项显示） -->
              <div v-if="item.isoverstandard === '1'" class="exceed-desc">
                <span class="desc-label">超标描述</span>
                <span class="desc-content">{{
                  item.overstandarddescribe
                }}</span>
              </div>
            </div>
            <!-- 无数据提示 -->
            <div v-if="monitorList.length === 0" class="no-data">暂无数据</div>
          </div>
        </div>

        <!-- 实时视频 -->
        <div class="panel realtime-video">
          <div class="panel-header">
            <div
              class="panel-title-container"
              @click="navigateToMenu('185006')"
            >
              <h2 class="panel-title">实时视频</h2>
            </div>
          </div>
          <div class="video-container">
            <video class="black-video-placeholder" controls="false"></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import NavBarWarning from "../../layout/components/NavBarWarning.vue";
// 仅保留业务接口，移除地图相关依赖
import {
  getAutoWaterQuality,
  getManualWaterQuality,
  getManualSegmentDateChange,
  autovaluatehourdata,
  getPollutionSourceAnalysis,
  getWarningLastInfo,
} from "@/views/biz/api/jiashicang";
import { getMenuList } from "@/api/commonApi";
import { getRouterNew } from "@/api/commonApi";

export default {
  name: "jiashicang",
  components: {NavBarWarning},
  data() {
    return {
      // 导航路径配置
      gopathMap: {
        185001: {
          1: "/riverGeneralMange/dataquery/manualMonitor/handdata",
          2: "/riverGeneralMange/onlineMonitoring",
        },
        185006: "/video/RealTimeVideo",
        185007: "/zhManagement/wryMangement/statisticsAnalysis/company",
      },
      // 手工断面类型（国考/省考/市考）
      manualSectionType: "0",
      // 实时监测列表数据
      monitorList: [],
      // ECharts实例存储（用于销毁和重绘）
      echartsInstances: [],
      // 全屏状态（控制标题栏高度）
      isFullscreen: false,
      // 表格高度（适配不同屏幕）
      tableHeight: 160,

      // 水环境质量饼图数据
      qualityPie: null,
      qualityPieData: [],
      qualityPieRate: {},
      qualityPieTotal: 0,
      qualityPieOfflinesize: 0,
      qualityPieisOvesize: 0,
      qualityPieexcellent: 0,

      // 污染源分析数据
      pollutionSourceAnalysisData: null,
      PollutionDates: [],
      PollutionBarData: [],
      PollutionLineData: [],
      sewagefarmNums: 0,
      outfallNums: 0,
      overNums: 0,
      dischargeNums: 0,

      // 手工断面达标率/优良率数据
      isOver: 95,
      tbisOver: 2,
      hbisOver: 3,
      yl: 75,
      tbyl: 2,
      hbyl: 3,
      gaugeSampleDate: "",

      // 水质变化图表数据
      waterChangeDates: [],
      waterChangeYilei: [],
      waterChangeErlei: [],
      waterChangeSanlei: [],
      waterChangeSilei: [],
      waterChangeWulei: [],
      waterChangeLiewulei: [],

      // 菜单列表（接口获取）
      menuList: [],
      // 图标匹配映射：菜单名称 -> 图标路径（与原functionModuleList对应）
      iconMatchMap: {
        流域水环境监管数据库建设: require("@/assets/images/jsc/i1.png"),
        流域水环境综合管理系统: require("@/assets/images/jsc/i2.png"),
        饮用水源地综合管理系统: require("@/assets/images/jsc/i3.png"),
        流域水环境污染预警分析系统: require("@/assets/images/jsc/i4.png"),
        智能视频监控管理系统: require("@/assets/images/jsc/i5.png"),
        流域污染源综合管理系统: require("@/assets/images/jsc/i6.png"),
        流域水环境污染追踪溯源系统: require("@/assets/images/jsc/i7.png"),
        水生态环境一张图: require("@/assets/images/jsc/i8.png"),
        系统权限管理: require("@/assets/images/jsc/i9.png"),
        流域水环境指挥调度系统: require("@/assets/images/jsc/i9.png"), // 新增菜单默认i9
      },
      // 默认图标（未匹配时使用）
      defaultIcon: require("@/assets/images/jsc/i9.png"),

      // 水环境质量饼图中心图标（base64完整编码）
      centerImage:
        "",
    };
  },
  computed: {
     ...mapGetters(["avatar", "nickName"]),
    // 顶部标题栏样式：F11全屏140px，非全屏自适应高度
    headerStyle() {
      return this.isFullscreen ? { height: "140px" } : { height: "10vh" };
    },
    // 主体内容样式：高度 = 屏幕高度 - 标题栏高度
    mainContentStyle() {
      return this.isFullscreen
        ? { height: "calc(100vh - 140px)" }
        : { height: "calc(100vh - 10vh)" };
    },
    // 格式化后的菜单列表：为每个菜单添加匹配的图标
    formattedMenuList() {
      return this.menuList.map((menu) => ({
        ...menu,
        icon: this.getMatchedIcon(menu.menuName),
      }));
    },
  },
  mounted() {
    this.$store.dispatch("GetInfo");
    // 初始化全屏状态监听
    this.checkFullscreen();
    window.addEventListener("fullscreenchange", this.checkFullscreen);
    window.addEventListener("webkitfullscreenchange", this.checkFullscreen);
    window.addEventListener("mozfullscreenchange", this.checkFullscreen);
    window.addEventListener("MSFullscreenChange", this.checkFullscreen);

    // 初始化数据和图表（先获取菜单列表，确保模块渲染）
    this.getMenuListData().then(() => {
      this.getAutoWaterQualityData();
      this.getManualWaterQualityData();
      this.getManualSegmentDateChangeData();
      this.getAutovaluatehourdata();
      this.getPollutionSourceAnalysisData();
      this.getWarningLastInfoData();
    });

    // 监听窗口resize，调整表格和图表高度
    window.addEventListener("resize", this.handleResize);
    // 初始计算一次表格高度
    this.calcTableHeight();
  },
  beforeDestroy() {
    // 移除所有监听
    window.removeEventListener("fullscreenchange", this.checkFullscreen);
    window.removeEventListener("webkitfullscreenchange", this.checkFullscreen);
    window.removeEventListener("mozfullscreenchange", this.checkFullscreen);
    window.removeEventListener("MSFullscreenChange", this.checkFullscreen);
    window.removeEventListener("resize", this.handleResize);

    // 销毁echarts实例
    this.echartsInstances.forEach((instance) => {
      instance.dispose();
    });
  },
  methods: {
    logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/login";
          });
        })
        .catch(() => {});
    },
    // 根据水质类别匹配标签类型
    getTagType(quality) {
      const typeMap = {
        Ⅰ类: "success",
        Ⅱ类: "success",
        Ⅲ类: "info",
        Ⅳ类: "warning",
        Ⅴ类: "danger",
        劣Ⅴ类: "danger",
        无类别: "default",
      };
      return typeMap[quality] || "default";
    },
    // 检查是否全屏（适配所有浏览器）
    checkFullscreen() {
      this.isFullscreen = !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
      );
      // 全屏状态变化时重新计算表格高度
      this.calcTableHeight();
    },
    // 计算表格高度（确保列表无滚动）
    calcTableHeight() {
      const screenWidth = window.innerWidth;
      if (screenWidth >= 1920) {
        this.tableHeight = 180;
      } else if (screenWidth >= 1680) {
        this.tableHeight = 160;
      } else if (screenWidth >= 1440) {
        this.tableHeight = 150;
      } else {
        this.tableHeight = 140;
      }
    },
    // 窗口resize处理：图表重绘 + 表格高度调整
    handleResize() {
      this.calcTableHeight();
      this.echartsInstances.forEach((instance) => {
        instance.resize();
      });
    },
    // 导航菜单数据获取（返回Promise，确保菜单加载完成后渲染其他数据）
    getMenuListData() {
      return getMenuList().then((res) => {
        this.menuList = res.data || [];
        // 按orderNum排序，保持菜单顺序一致
        this.menuList.sort((a, b) => a.orderNum - b.orderNum);
      });
    },
    // 中部菜单点击跳转
    menuClickEvent(e) {
      this.$store.commit("SET_SYSID", e.keyId);
      this.$store.dispatch("GenerateRoutes").then(() => {
        getRouterNew(e.keyId).then((res) => {
          console.log(">>>luyou", res);
          // let path = res.data[0].path;
          let path = res.data.map((node) => this.getFullLink(node));
          let gopath = "";
          if (path.length > 0) {
            gopath = path[0];
            setTimeout(() => {
              // this.$router.push({
              //   path: path,
              // });
              // 相同连接只打开一个，打开过的直接跳转
              console.log('gopath-------------------------------',gopath,e.keyId)
              window.open(gopath, gopath);
            }, 1000);
          } else {
            this.$message.warn("暂无数据");
          }
        });
      });
    },
    // 核心：递归拼接完整链接
    getFullLink(node) {
      // 处理当前节点path：去除开头的"/"，避免拼接出"//"；若path不存在则用空字符串
      const currentPath = node.path ? node.path.replace(/^\/+/, "") : "";

      // 判断是否有子节点（必须是非空数组）
      if (Array.isArray(node.children) && node.children.length > 0) {
        // 取第一个子节点继续递归，拼接子节点路径
        const firstChildLink = this.getFullLink(node.children[0]);
        // 子节点路径非空时才加"/"，避免结尾多斜杠
        return firstChildLink
          ? `${currentPath}/${firstChildLink}`
          : currentPath;
      }

      // 没有子节点，返回当前节点路径（递归终止）
      return currentPath;
    },
    // 菜单导航跳转
    navigateToMenu(keyId, type) {
      this.$store.commit("SET_SYSID", keyId);
      this.$store.dispatch("GenerateRoutes").then(() => {
        getRouterNew(keyId).then((res) => {
          let gopath = "";
          if (type) {
            gopath = this.gopathMap[keyId][type];
          } else {
            gopath = this.gopathMap[keyId];
          }
          setTimeout(() => {
            window.open(gopath, "_blank");
          }, 1000);
        });
      });
    },
    // 根据菜单名称匹配对应的图标
    getMatchedIcon(menuName) {
      // 直接匹配菜单名称，存在则返回对应图标，否则返回默认图标
      return this.iconMatchMap[menuName] || this.defaultIcon;
    },
    // 格式化菜单名称（添加换行符，保持原样式一致）
    formatMenuName(menuName) {
      // 根据菜单名称长度和关键词添加换行，保持显示美观
      const nameMap = {
        流域水环境监管数据库建设: "流域水环境监管<br/>数据库建设",
        流域水环境综合管理系统: "流域水环境<br/>综合管理系统",
        饮用水源地综合管理系统: "饮用水源地<br/>综合管理系统",
        流域水环境污染预警分析系统: "流域水环境污染<br/>预警分析系统",
        智能视频监控管理系统: "智能视频监控<br/>管理系统",
        流域污染源综合管理系统: "流域污染源<br/>综合管理系统",
        流域水环境污染追踪溯源系统: "流域水环境污染<br/>追踪溯源系统",
        水生态环境一张图: "水生态环境<br/>一张图",
        系统权限管理: "系统权限<br/>管理",
        流域水环境指挥调度系统: "流域水环境<br/>指挥调度系统",
      };
      return nameMap[menuName] || menuName; // 未匹配的名称不换行
    },
    // 中间功能模块点击事件（使用menuList的path跳转）
    handleModuleClick(module) {
      if (module.path) {
        // 拼接路由路径（根据项目路由配置调整前缀）
        const routePath = `/${module.path}`;
        this.$router.push(routePath);
      }
    },
    // 水环境质量饼图初始化
    initQualityPieChart() {
      if (this.qualityPie) {
        const index = this.echartsInstances.findIndex(
          (inst) => inst === this.qualityPie
        );
        if (index !== -1) this.echartsInstances.splice(index, 1);
        this.qualityPie.dispose();
      }

      if (this.$refs.qualityPie) {
        try {
          this.qualityPie = echarts.init(this.$refs.qualityPie);
          this.echartsInstances.push(this.qualityPie);

          // 颜色映射
          const colorMap = {
            Ⅰ类: "#1e90ff",
            Ⅱ类: "#32cd32",
            Ⅲ类: "#90ee90",
            Ⅳ类: "#ffa500",
            Ⅴ类: "#ff6347",
            劣Ⅴ类: "#dc143c",
            无类别: "#cccccc",
          };

          // 处理数据
          let chartData = [];
          let nameArray = [];
          let color = [];

          this.qualityPieData.forEach((item) => {
            const itemColor = colorMap[item.type] || "#666666";
            nameArray.push(item.type);
            color.push(itemColor);

            // 数据项
            chartData.push({
              value: item.size,
              name: item.type,
              itemStyle: {
                normal: {
                  borderWidth: 8,
                  borderColor: itemColor,
                },
              },
              tooltip: {
                formatter: () => {
                  const rate = this.qualityPieRate[item.type] || 0;
                  return `${item.type}: ${item.size}个 (${rate}%)`;
                },
              },
            });

            // 空白项（用于分隔）
            chartData.push({
              value: 0,
              name: "",
              itemStyle: {
                normal: {
                  label: { show: false },
                  labelLine: { show: false },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            });
          });

          // 图例分两列显示
          const legendData1 = nameArray.slice(
            0,
            Math.ceil(nameArray.length / 2)
          );
          const legendData2 = nameArray.slice(Math.ceil(nameArray.length / 2));

          // 图表配置
          const option = {
            backgroundColor: "transparent",
            color: color,
            graphic: {
              elements: [
                {
                  type: "image",
                  z: 3,
                  style: {
                    image: this.centerImage,
                    width: 75,
                    height: 75,
                  },
                  left: "16%",
                  top: "26%",
                },
              ],
            },
            tooltip: {
              trigger: "item",
              textStyle: { fontSize: 12, color: "#fff" },
              backgroundColor: "rgba(10, 30, 60, 0.9)",
              borderColor: "rgba(0, 240, 255, 0.5)",
              borderWidth: 1,
              padding: 8,
            },
            legend: [
              {
                icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                orient: "vertical",
                data: legendData1,
                right: "30%",
                top: "center",
                align: "left",
                textStyle: {
                  color: "#fff",
                  fontSize: 13,
                },
                itemGap: 5,
                formatter: (name) => {
                  const dataItem = this.qualityPieData.find(
                    (item) => item.type === name
                  );
                  const rate = this.qualityPieRate[name] || 0;
                  return `${name}: (${rate}%)`;
                },
              },
              {
                icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                orient: "vertical",
                data: legendData2,
                right: "0%",
                top: "center",
                align: "left",
                textStyle: {
                  color: "#fff",
                  fontSize: 13,
                },
                itemGap: 5,
                formatter: (name) => {
                  const dataItem = this.qualityPieData.find(
                    (item) => item.type === name
                  );
                  const rate = this.qualityPieRate[name] || 0;
                  return `${name}: (${rate}%)`;
                },
              },
            ],
            toolbox: {
              show: false,
            },
            series: [
              {
                name: "",
                type: "pie",
                radius: [50, 53],
                width: 105,
                height: 105,
                hoverAnimation: false,
                center: ["20%", "55%"],
                left: "20%",
                top: "center",
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                  },
                },
                data: chartData,
              },
            ],
          };

          this.qualityPie.setOption(option);
        } catch (error) {
          console.error("ECharts初始化失败:", error);
        }
      }
    },
    // 水质变化图表初始化
    initWaterChangeChart() {
      const waterChange = echarts.init(this.$refs.waterChange);
      this.echartsInstances.push(waterChange);
      waterChange.setOption({
        tooltip: {
          trigger: "axis",
          textStyle: { color: "#333", fontSize: 12 },
        },
        grid: {
          top: "12%",
          left: "4%",
          right: "4%",
          bottom: "12%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.waterChangeDates,
          axisLine: { lineStyle: { color: "rgba(255,255,255,0.3)" } },
          axisLabel: { color: "#fff", fontSize: 12, rotate: 0 },
          splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
        },
        yAxis: {
          type: "value",
          max: 100,
          min: 0,
          axisLine: { lineStyle: { color: "rgba(255,255,255,0.3)" } },
          axisLabel: { color: "#fff", fontSize: 12, formatter: "{value} %" },
          splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
        },
        legend: {
          data: ["I类", "II类", "III类", "IV类", "V类", "劣V类"],
          top: "0%",
          textStyle: { color: "#fff", fontSize: 11 },
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            name: "I类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeYilei,
            itemStyle: { color: "#1e90ff" },
            barWidth: 15,
          },
          {
            name: "II类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeErlei,
            itemStyle: { color: "#32cd32" },
            barWidth: 15,
          },
          {
            name: "III类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeSanlei,
            itemStyle: { color: "#90ee90" },
            barWidth: 15,
          },
          {
            name: "IV类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeSilei,
            itemStyle: { color: "#ffa500" },
            barWidth: 15,
          },
          {
            name: "V类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeWulei,
            itemStyle: { color: "#ff6347" },
            barWidth: 15,
          },
          {
            name: "劣V类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeLiewulei,
            itemStyle: { color: "#dc143c" },
            barWidth: 15,
          },
        ],
      });
    },
    // 污染源分析图表初始化
    initPollutionChart() {
      const pollutionBar = echarts.init(this.$refs.pollutionBar);
      this.echartsInstances.push(pollutionBar);
      pollutionBar.setOption({
        tooltip: {
          trigger: "axis",
          textStyle: { color: "#333", fontSize: 12 },
        },
        grid: {
          top: "10%",
          left: "4%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.PollutionDates,
          axisLine: { lineStyle: { color: "rgba(255,255,255,0.3)" } },
          axisLabel: { color: "#fff", fontSize: 12, rotate: 0 },
          splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
        },
        yAxis: [
          {
            type: "value",
            axisLine: { lineStyle: { color: "rgba(255,255,255,0.3)" } },
            axisLabel: { color: "#fff", fontSize: 12 },
            splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
          },
          {
            type: "value",
            axisLine: { lineStyle: { color: "rgba(255,255,255,0.3)" } },
            axisLabel: { color: "#fff", fontSize: 12 },
            splitLine: { show: false },
          },
        ],
        series: [
          {
            name: "超标企业",
            type: "bar",
            yAxisIndex: 0,
            data: this.PollutionBarData,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#4a90e2" },
                  { offset: 1, color: "#0088fe" },
                ],
              },
            },
            barWidth: 18,
          },
          {
            name: "排放量",
            type: "line",
            yAxisIndex: 1,
            data: this.PollutionLineData,
            symbol: "circle",
            symbolSize: 6,
            lineStyle: { color: "#f74663", width: 2 },
            itemStyle: {
              color: "#f74663",
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
        ],
      });
    },
    // 数据请求 - 水环境质量
    getAutoWaterQualityData() {
      getAutoWaterQuality()
        .then((response) => {
          if (response.code === 200) {
            this.qualityPieData = response.data || [];
            this.qualityPieTotal = this.qualityPieData.reduce(
              (sum, item) => sum + item.size,
              0
            );
            this.qualityPieOfflinesize =
              this.qualityPieData.find((item) => item.type === "无类别")
                ?.size || 0;
            this.qualityPieisOvesize = this.qualityPieData
              .filter((item) => ["Ⅳ类", "Ⅴ类", "劣Ⅴ类"].includes(item.type))
              .reduce((sum, item) => sum + item.size, 0);
            const excellentSize = this.qualityPieData
              .filter((item) => ["Ⅰ类", "Ⅱ类", "Ⅲ类"].includes(item.type))
              .reduce((sum, item) => sum + item.size, 0);
            this.qualityPieexcellent = this.qualityPieTotal
              ? Math.round((excellentSize / this.qualityPieTotal) * 100)
              : 0;

            this.qualityPieData.forEach((item) => {
              this.qualityPieRate[item.type] = Math.round(
                (item.size / this.qualityPieTotal) * 100
              );
            });
            this.initQualityPieChart();
          } else {
            console.error("获取水质数据失败:", response);
            this.qualityPieData = [];
          }
        })
        .catch((error) => {
          console.error("获取水质数据异常:", error);
          this.qualityPieData = [];
        });
    },
    // 数据请求 - 手工断面水质
    getManualWaterQualityData() {
      let params = { assessTypeCode: this.manualSectionType };
      getManualWaterQuality(params)
        .then((response) => {
          if (response.code === 200) {
            let data = response.data;
            this.gaugeSampleDate = data.sampleDate || "";
            let manualWaterQualityData = data.isoverList || null;
            this.isOver = manualWaterQualityData.isOver;
            this.tbisOver = manualWaterQualityData.tbisOver;
            this.hbisOver = manualWaterQualityData.hbisOver;
            this.yl = manualWaterQualityData.yl;
            this.hbyl = manualWaterQualityData.hbyl;
            this.tbyl = manualWaterQualityData.tbyl;
          } else {
            console.error("获取手动断面达标数据失败:", response);
          }
        })
        .catch((error) => {
          console.error("获取手动断面达标数据异常:", error);
        });
    },
    // 手工断面类型切换
    manualTypeChange() {
      this.getManualWaterQualityData();
    },
    // 数据请求 - 实时监测列表
    getAutovaluatehourdata() {
      autovaluatehourdata()
        .then((response) => {
          if (response.code === 200) {
            this.monitorList = response.rows || [];
            // 限制列表最大显示行数
            if (this.monitorList.length > 5) {
              this.monitorList = this.monitorList.slice(0, 5);
            }
          } else {
            console.error("获取实时监测数据失败:", response);
          }
        })
        .catch((error) => {
          console.error("获取实时监测数据异常:", error);
        });
    },
    // 数据请求 - 水质变化
    getManualSegmentDateChangeData() {
      getManualSegmentDateChange()
        .then((response) => {
          if (response.code === 200) {
            let data = response.data;
            this.waterChangeDates = data.timeList || [];
            // 限制x轴数据量
            if (this.waterChangeDates.length > 8) {
              this.waterChangeDates = this.waterChangeDates.slice(0, 8);
            }
            let waterChangedata = data.data || [];
            this.waterChangeYilei = [];
            this.waterChangeErlei = [];
            this.waterChangeSanlei = [];
            this.waterChangeSilei = [];
            this.waterChangeWulei = [];
            this.waterChangeLiewulei = [];
            waterChangedata.slice(0, 8).forEach((item) => {
              this.waterChangeYilei.push(item.oneCategory);
              this.waterChangeErlei.push(item.twoCategory);
              this.waterChangeSanlei.push(item.threeCategory);
              this.waterChangeSilei.push(item.fourCategory);
              this.waterChangeWulei.push(item.fiveCategory);
              this.waterChangeLiewulei.push(item.sixCategory);
            });
            this.initWaterChangeChart();
          } else {
            console.error("获取手动断面日期变更数据失败:", response);
          }
        })
        .catch((error) => {
          console.error("获取手动断面日期变更数据异常:", error);
        });
    },
    // 污染源数据处理
    processPollutionSourceAnalysisData() {
      if (this.pollutionSourceAnalysisData) {
        this.sewagefarmNums = this.pollutionSourceAnalysisData.sewagefarmNums;
        this.outfallNums = this.pollutionSourceAnalysisData.outfallNums;
        this.overNums = this.pollutionSourceAnalysisData.overNums;
        this.dischargeNums = this.pollutionSourceAnalysisData.discharge;

        const pollutionList =
          this.pollutionSourceAnalysisData.pollutionList || [];
        // 限制x轴数据量
        this.PollutionDates = pollutionList
          .slice(0, 8)
          .map((item) => item.dateTime);
        this.PollutionBarData = pollutionList
          .slice(0, 8)
          .map((item) => item.overNums);
        this.PollutionLineData = pollutionList
          .slice(0, 8)
          .map((item) => item.discharge);
      }
      this.initPollutionChart();
    },
    // 数据请求 - 污染源分析
    getPollutionSourceAnalysisData() {
      getPollutionSourceAnalysis()
        .then((response) => {
          if (response.code === 200) {
            this.pollutionSourceAnalysisData = response.data;
            this.processPollutionSourceAnalysisData();
          } else {
            console.error("获取污染源分析数据失败:", response);
          }
        })
        .catch((error) => {
          console.error("获取污染源分析数据异常:", error);
        });
    },
    // 数据请求 - 最新预警信息
    getWarningLastInfoData() {
      getWarningLastInfo()
        .then((response) => {
          if (response.code === 200) {
            let warnData = response.data || [];
          }
        })
        .catch((error) => {
          console.error("获取最新预警信息异常:", error);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
// 基础样式变量
$primary-color: #00f0ff;
$secondary-color: #0088fe;
$success-color: #32cd32;
$danger-color: #ff4d4f;
$bg-color: #0a192f;
$panel-bg: rgba(10, 30, 60, 0.9); // 加深面板背景，提升对比度
$border-color: rgba(0, 240, 255, 0.4);
$text-color: #fff;
$text-secondary: rgba(255, 255, 255, 0.8);
$shadow: 0 0 20px rgba(0, 240, 255, 0.3);

.dashboard-container {
  width: 100%;
  height: 100vh;
  // 关键修改：背景图自适应，保持比例且完全显示
  background: url("~@/assets/images/jsc/bg1.png") no-repeat center;
  // background-size: cover; // 或 contain，根据设计需求选择
  background-size: 100% 100%; // 或 contain，根据设计需求选择
  color: $text-color;
  overflow: hidden;
}

// 顶部标题栏（F11全屏140px，非全屏自适应）
.top-header {
  display: flex;
  align-items: center;
  justify-content: center;
  // background: url("~@/assets/images/jsc/top.png") no-repeat center;
  background-size: cover;
  transition: height 0.3s ease; // 平滑过渡

  h1 {
    font-size: 29px;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
    margin: 0;
    text-align: center;
    // padding: 0 20px;
    padding: 50px 0 0 0;
  }

  // 响应式字体大小
  @media (max-width: 1680px) {
    h1 {
      font-size: 28px;
    }
  }
  @media (max-width: 1440px) {
    h1 {
      font-size: 26px;
    }
  }
  @media (max-width: 1200px) {
    h1 {
      font-size: 22px;
    }
  }
  @media (max-width: 768px) {
    h1 {
      font-size: 18px;
    }
  }
}

// 主体内容布局（核心：左右面板无滚动，完全显示）
.main-content {
  display: flex;
  width: 100%;
  height: 100%;
  transition: height 0.3s ease; // 平滑过渡
  overflow: hidden; // 禁止整体滚动
  position: inherit;
  .right-menu {
    position: absolute;
    right: 0px;
    top: 10px;
    z-index: 2;
    height: 50px;
    line-height: 50px;
    margin-right: 30px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 0px;
      padding-right: 0px;

      .avatar-wrapper {
        margin-top: 10px;
        position: relative;

        .user-avatar {
         
          cursor: pointer;
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }

        .user-nickname {
          position: relative;
          color: #73B6EF;
          bottom: 10px;
          font-size: 14px;
          font-weight: bold;

        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}

// 左右面板列：1920*1080下固定500px，高度100%，无滚动
.panel-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  width: 500px; // 核心：1920*1080下固定500px
  height: 100%;
  box-sizing: border-box; // 确保padding不影响宽高
  overflow: hidden; // 禁止面板列滚动
}

// 单个面板：均分高度，确保所有内容完全显示
.panel {
  background-color: transparent;
  padding: 12px;
  flex: 1; // 面板均分父容器高度
  min-height: 180px; // 最小高度，避免过矮
  display: flex;
  flex-direction: column;
  justify-content: space-between; // 内容均匀分布
}

// 面板头部
.panel-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  padding-bottom: 6px;
  background-image: url("~@/assets/images/jsc/title.png");
  height: 40px;
  // background-position: -20px 156%;
  background-position: -20px -30%;
  background-repeat: no-repeat;

  .panel-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
  }

  .panel-title {
    // font-size: 16px;
    // margin: 0;
    // color: $primary-color;
    // font-weight: 600;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 18px;
    color: #ffffff;
    font-style: italic;
  }

  .data-icon {
    cursor: pointer;
    font-size: 16px;
    color: $primary-color;
    transition: all 0.3s;

    &:hover {
      color: $secondary-color;
      transform: scale(1.1);
    }
  }

  .stats,
  .date {
    font-size: 12px;
    color: $text-secondary;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap; // 禁止文字换行
    overflow: hidden;
    text-overflow: ellipsis; // 超出部分省略号
  }
}

// 图表容器：自适应面板高度，无滚动
.chart {
  width: 100%;
  flex: 1;
  min-height: 100px;
}

// 单选按钮组：紧凑布局
.radio-group {
  margin: 8px 0;
  flex-shrink: 0;

  .el-radio-group {
    margin-left: 50%;
    transform: translateX(-50%);

    .el-radio-button {
      text-align: center;

      .el-radio-button__inner {
        background: transparent;
        border-color: $border-color;
        color: $text-secondary;
        font-size: 12px;
        padding: 2px 0;
      }

      &.is-active {
        .el-radio-button__inner {
          background: $primary-color;
          border-color: $primary-color;
          color: $bg-color;
        }
      }
    }
  }
}

// ******** 双环形仪表盘样式 ********
.gauge-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 10px; // 左右仪表盘间距
  padding: 10px 0;
}

// 单个环形组（图表+文字）
.gauge-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 49%;
  height: 100%;
}
.gauge-group.cicLeft {
  background: url("~@/assets/images/jsc/l_i2.png");
  background-repeat: no-repeat;
}
.gauge-group.cicRight {
  background: url("~@/assets/images/jsc/l_i3.png");
  background-repeat: no-repeat;
}

// 环形图表容器
.gauge-chart {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}

// 文字信息容器
.gauge-info {
  display: flex;
  // flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: end;
  width: 100%;
  margin-top: 13%;
}

// 百分比数值（最大号字体，突出显示）
.gauge-value {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6); // 发光效果，增强视觉
  color: #fff;
}

// 同比环比容器
.gauge-trend {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 10%;
}

// 同比环比文字样式（区分正负）
.gauge-trend .up {
  color: $success-color;
}
.gauge-trend .down {
  color: $danger-color;
}

// 指标说明（底部文字）
.gauge-label {
  font-size: 14px;
  color: #fff;
  margin-top: 4px;
  font-weight: 500;
  text-shadow: 0 0 4px rgba(0, 240, 255, 0.4);
}

// 分割线
.gauge-divider {
  width: 2px;
  height: 80px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 240, 255, 0.6),
    transparent
  ); // 渐变分割线，更美观
}

// 信息文本：紧凑布局
.info-text {
  font-size: 12px;
  line-height: 1.8;
  color: $text-secondary;
  flex-shrink: 0;

  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;

    p {
      margin: 0;
      flex: 1;
      text-align: center;
      padding: 0 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    p:first-child {
      text-align: left;
      padding-left: 0;
    }

    p:last-child {
      text-align: right;
      padding-right: 0;
    }
  }
}

// 监测表格：固定高度，无滚动
.monitor-table {
  width: 100%;
  flex: 1;
  min-height: 100px;

  .el-table {
    background: transparent;
    border: 1px solid $border-color;
    font-size: 12px;

    .el-table__header-wrapper {
      .el-table__header {
        th {
          background: rgba(0, 240, 255, 0.1) !important;
          color: $primary-color !important;
          border-bottom: 1px solid $border-color !important;
          font-size: 12px;
          padding: 4px 0;
        }
      }
    }

    .el-table__body-wrapper {
      .el-table__row {
        td {
          background: transparent !important;
          color: $text-secondary !important;
          border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
          font-size: 11px;
          padding: 6px 0;
        }
      }
    }
  }

  .el-tag {
    font-size: 10px;
    padding: 1px 4px;
  }
}

// 视频容器：自适应高度
.video-container {
  width: 100%;
  flex: 1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;

  .black-video-placeholder {
    width: 100%;
    height: 100%;
    background-color: #000;
    border-radius: 4px;
    object-fit: cover;
  }
}

// 中间地图区域
.center-section {
  flex: 1;
  padding: 15px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: url("~@/assets/images/jsc/midn.png") no-repeat center;
  // background-size: contain; // 确保中间背景图完全显示
  // background-size: 80% auto; // 确保中间背景图完全显示
  background-size: 66% auto;
  background-position: center 10%;
  position: relative;

  // 中间功能模块区域
  .function-modules {
    position: absolute;
    bottom: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    // background: rgba(10, 30, 60, 0.8);
    // border: 1px solid rgba(0, 240, 255, 0.4);
    border-radius: 8px;
    margin-bottom: 20px;

    .module-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 150px;
      height: 160px;
      cursor: pointer;
      transition: all 0.3s;
      background-image: url("~@/assets/images/jsc/bgk.png");
      background-size: 100% 100%;
      justify-content: center;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
      }

      .module-icon {
        width: 55px;
        height: auto;
        margin-bottom: 8px;
        margin-top: 15%;
      }

      .module-name {
        // font-size: 14px;
        // color: #fff;
        text-align: center;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 20px;
        color: #e9edf5;
        font-style: italic;
      }
    }
  }
}

.map-container {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid $border-color;
  box-shadow: $shadow;
}

// 实时监测列表-自定义样式
.monitor-list-custom {
  flex: 1;
  overflow-y: auto; // 超出高度时滚动
  padding: 10px 0;

  .monitor-item {
    background: rgba(10, 30, 60, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 10px;
    transition: all 0.3s;

    &:hover {
      border-color: rgba(0, 240, 255, 0.6);
      box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
    }

    // 超标项特殊样式
    &.exceed {
      border-left: 3px solid #ff4d4f;
    }
  }

  .item-header {
    display: flex;
    align-items: center;
    gap: 8px;

    .el-icon-water-drop {
      color: #00f0ff;
      font-size: 16px;
    }

    .item-name {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
    }

    .el-tag {
      margin-left: auto; // 推到右侧
    }
  }

  .exceed-desc {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 240, 255, 0.3);

    .desc-label {
      color: #ff4d4f;
      font-size: 13px;
      margin-right: 6px;
    }

    .desc-content {
      color: #fff;
      font-size: 13px;
    }
  }

  .no-data {
    text-align: center;
    color: #aaa;
    padding: 20px 0;
    font-size: 13px;
  }
}

// 响应式断点调整（确保不同屏幕下均无滚动）
@media (max-width: 1920px) and (min-width: 1680px) {
  .panel-col {
    width: 500px;
  }

  .panel {
    padding: 10px;
  }

  .chart {
    min-height: 90px;
  }

  // 仪表盘响应式
  .gauge-chart {
    width: 100px;
    height: 100px;
  }
  .gauge-value {
    font-size: 24px;
  }
  .gauge-trend {
    font-size: 11px;
  }
  .gauge-label {
    font-size: 13px;
  }
}

@media (max-width: 1680px) and (min-width: 1440px) {
  .panel-col {
    width: 400px;
  }

  .panel-header .stats,
  .panel-header .date {
    font-size: 11px;
  }

  // 仪表盘响应式
  .gauge-chart {
    width: 90px;
    height: 90px;
  }
  .gauge-value {
    font-size: 22px;
    margin-bottom: 6px;
  }
  .gauge-trend {
    font-size: 10px;
  }
  .gauge-label {
    font-size: 12px;
  }
  .gauge-container {
    gap: 25px;
  }
}

@media (max-width: 1440px) and (min-width: 1200px) {
  .panel-col {
    width: 350px;
  }

  .panel {
    min-height: 160px;
  }

  .chart {
    min-height: 80px;
  }

  .monitor-table .el-table {
    font-size: 11px;
  }

  // 仪表盘响应式
  .gauge-chart {
    width: 80px;
    height: 80px;
  }
  .gauge-value {
    font-size: 20px;
    margin-bottom: 5px;
  }
  .gauge-trend {
    font-size: 10px;
  }
  .gauge-label {
    font-size: 11px;
  }
  .gauge-container {
    gap: 20px;
  }
}

// 平板及以下设备：纵向布局，无滚动
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
    overflow: auto; // 仅允许纵向滚动，避免内容溢出
  }

  .panel-col {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 10px;
    gap: 10px;
  }

  .panel {
    flex: 1;
    min-width: 280px;
    min-height: 200px;
  }

  .center-section {
    order: -1;
    height: 400px !important;
    padding: 10px;
  }

  // 小屏幕下仪表盘纵向布局
  .gauge-container {
    flex-direction: column !important;
    gap: 15px !important;
  }

  .gauge-group {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
  }

  .gauge-chart {
    width: 100px !important;
    height: 100px !important;
  }

  .gauge-divider {
    width: 80px;
    height: 2px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(0, 240, 255, 0.6),
      transparent
    );
  }
}

@media (max-width: 768px) {
  .panel-col {
    flex-direction: column;
  }

  .panel {
    min-width: auto;
    min-height: 180px;
  }

  .center-section {
    height: 300px !important;
  }

  // 小屏幕仪表盘调整
  .gauge-group {
    flex-direction: column;
  }
  .gauge-chart {
    width: 80px !important;
    height: 80px !important;
  }
  .gauge-value {
    font-size: 18px;
  }
}
</style>
